<template>
  <div class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden" v-if="data">
    <!-- 左 -->
    <div class="flex-1 mr-3 bg-slate-800/50 p-3 flex flex-col">
      <!-- 横向柱状图 -->
      <HorizontalBar class="h-1/3 box-border pb-4" :data="data.regionData"/>
      <!-- 雷达图 -->
      <RadarBar class="h-1/3 box-border pb-4" :data="data.riskData"/>
      <!-- 数据传递关系图 -->
      <Relation class="h-1/3" :data="data.relationData"/>
    </div>

    <!-- 中 -->
    <div class="w-1/2 mr-3 flex flex-col">
      <!-- 数据展示图 -->
      <TotalData class="bg-slate-800/50 p-3" :data="data.totalData"/>
      <!-- 地图可视化 -->
      <MapChart class="bg-slate-800/50 p-3 mt-4 flex-1" :data="data.mapData"/>
    </div>
    
    <!-- 右 -->
    <div class="flex-1 bg-slate-800/50 p-3 flex flex-col">
      <!-- 竖向柱状图 -->
      <VerticalBar class="h-1/3 box-border pb-4" :data="data.serverData"/>
      <!-- 环形资源站比图 -->
      <RingBar class="h-1/3 box-border pb-4" :data="data.abnormalData"/>
      <!-- 文档云图 -->
      <WordCloud class="h-1/3 box-border" :data="data.wordCloudData"/>
    </div>
  </div>
  
</template>

<script setup lang="ts">
import HorizontalBar from './components/HorizontalBar.vue';
import MapChart from './components/MapChart.vue';
import RadarBar from './components/RadarBar.vue';
import Relation from './components/Relation.vue';
import RingBar from './components/RingBar.vue';
import TotalData from './components/TotalData.vue';
import VerticalBar from './components/VerticalBar.vue';
import WordCloud from './components/WordCloud.vue';

import { getVisualization }  from '@/api/apis'
import { ref, onMounted } from 'vue'

const data = ref() as any

onMounted(()=>{
  getData()
  setInterval(()=>{
    getData()
  },3000)
})

const getData = async() => {
  let res = await getVisualization()
  data.value = res.data
}
</script>

<style scoped>

</style>
